// 导入监控元素或组件是否进入可视区域的方法
import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'

export function useObserver (apiFn) {
  /**
     * 步骤:
     * 1.通过ref获取要监控的元素或组件
     * 2.调用useIntersectionObserver(要监控的元素DOM对象或组件实例, 在监控期间执行的回调函数)
     * 说明:监控函数执行完可以解构出stop方法 => 停止监控
     */
  const target = ref(null)
  // target 是观察的目标dom容器，必须是dom容器，而且是vue3.0方式绑定的dom对象
  // isIntersecting 是否进入可视区域，true是进入 false是移出
  // observerElement 被观察的参数对象 里面有root rootMargin thresholds等参数
  // [{ isIntersecting }] 是函数参数的解构,该参数是一个对象所以先进行数组解构,再进行对象解构
  const { stop } = useIntersectionObserver(target, ([{ isIntersecting }], observerElement) => {
    // console.log('监控回调', isIntersecting, observerElement)
    // 在此处可根据isIntersecting来判断，然后做业务
    if (isIntersecting) {
      // 如果不关闭,name进入离开会多次发送请求
      stop()
      // console.log('发送请求')
      // 按需发送请求
      apiFn()
    }
  }, {
    // 即加载时机的优化,因为某个区域需要滚动比较多才能去加载数据, 出现拖动断层空白, 添加threshold参数, 设置为0
    // 进入当前元素可视区域的比例是多少才执行回调 0-1 值越大 代表需要进入的面积越大
    threshold: 0 // 进入后立刻触发
  })
  return { target }
}
